<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1"
      ><router-link to="/workbench"> 工作台 </router-link></el-menu-item
    ><el-menu-item index="1"
      ><router-link to="/depot">门店</router-link></el-menu-item
    ><el-menu-item index="1"
      ><router-link to="/dd">订单 </router-link> </el-menu-item
    ><el-menu-item index="1">财务</el-menu-item>
    <el-sub-menu index="2">
      <template #title>11</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>终端</el-menu-item>
    <el-menu-item index="4">会员</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const activeIndex = ref("1");
const activeIndex2 = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style>
.el-menu-demo {
  width: 1000px !important;
}
</style>
